import React, { useEffect, useLayoutEffect, useInsertionEffect } from "react";

/*
`useInsertionEffect` 与useEffect相同，在所有DOM变更之前同步触发。在使用 useLayoutEffect 读取布局之前，使用这个函数将样式注入到DOM中。因为这个钩子的作用域是有限的，所以这个钩子不能访问 refs，也不能调度更新。
*/

const App = () => {
  useInsertionEffect(() => {
    console.log("useInsertionEffect"); // 1
    // const style = document.createElement('style')
    // style.innerHTML = '.box { color: red }'
    // document.head.appendChild(style)
  });

  useEffect(() => {
    console.log("useEffect"); // 3
  });

  useLayoutEffect(() => {
    console.log("useLayoutEffect"); // 2
  });
  return (
    <>
      <h2>useInsertionEffect</h2>
    </>
  );
};

export default App;
